Uvjetno zaključivanje tipova: Ovladavanje ključnom riječi 'infer' u TypeScriptu

Sustav tipova u TypeScriptu nudi moćne alate za stvaranje robusnog i održivog koda. Među tim alatima, uvjetni tipovi ističu se kao svestran mehanizam za izražavanje složenih odnosa među tipovima. Ključna riječ infer otključava napredne mogućnosti unutar uvjetnih tipova, omogućujući sofisticirano izdvajanje i manipulaciju tipovima. Ovaj sveobuhvatni vodič istražit će zamršenosti ključne riječi infer, pružajući praktične primjere i uvide koji će vam pomoći da ovladate njezinom upotrebom.

Razumijevanje uvjetnih tipova

Prije nego što zaronimo u infer, ključno je shvatiti osnove uvjetnih tipova. Uvjetni tipovi omogućuju definiranje tipova koji ovise o uvjetu, slično ternarnom operatoru u JavaScriptu. Sintaksa slijedi ovaj obrazac:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Ovdje, ako je tip T dodijeljiv tipu U, rezultirajući tip je X; u suprotnom, to je Y.

Primjer:

            type IsString<T> = T extends string ? true : false;

type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
            

              
                Copy
              
            
          

Ovaj jednostavan primjer pokazuje kako se uvjetni tipovi mogu koristiti za određivanje je li tip string ili ne. Ovaj se koncept proširuje na složenije scenarije, otvarajući put ključnoj riječi infer.

Uvod u ključnu riječ 'infer'

Ključna riječ infer koristi se unutar true grane uvjetnog tipa za uvođenje varijable tipa koja se može zaključiti iz tipa koji se provjerava. To vam omogućuje izdvajanje određenih dijelova tipa i njihovo korištenje u rezultirajućem tipu.

Sintaksa:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

U ovoj sintaksi, R je varijabla tipa koja će se zaključiti iz strukture tipa T. Ako T odgovara obrascu, R će sadržavati zaključeni tip, a rezultirajući tip bit će X; u suprotnom, bit će Y.

Osnovni primjeri upotrebe 'infer'

1. Zaključivanje povratnog tipa funkcije

Čest slučaj upotrebe je zaključivanje povratnog tipa funkcije. To se može postići sljedećim uvjetnim tipom:

            type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
            

              
                Copy
              
            
          

Objašnjenje:

• T extends (...args: any) => any: Ovo ograničenje osigurava da je T funkcija.
• (...args: any) => infer R: Ovaj obrazac odgovara funkciji i zaključuje povratni tip kao R.
• R : any: Ako T nije funkcija, rezultirajući tip je any.

Primjer:

            function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetingReturnType = ReturnType<typeof greet>; // type GreetingReturnType = string

function calculate(a: number, b: number): number {
  return a + b;
}

type CalculateReturnType = ReturnType<typeof calculate>; // type CalculateReturnType = number

            

              
                Copy
              
            
          

Ovaj primjer pokazuje kako ReturnType uspješno izdvaja povratne tipove funkcija greet i calculate.

2. Zaključivanje tipa elementa polja

Još jedan čest slučaj upotrebe je izdvajanje tipa elementa polja (niza):

            type ElementType<T> = T extends (infer U)[] ? U : never;
            

              
                Copy
              
            
          

Objašnjenje:

• T extends (infer U)[]: Ovaj obrazac odgovara polju i zaključuje tip elementa kao U.
• U : never: Ako T nije polje, rezultirajući tip je never.

Primjer:

            type StringArrayElement = ElementType<string[]>; // type StringArrayElement = string
type NumberArrayElement = ElementType<number[]>; // type NumberArrayElement = number
type MixedArrayElement = ElementType<(string | number)[]>; // type MixedArrayElement = string | number

type NotAnArray = ElementType<number>; // type NotAnArray = never
            

              
                Copy
              
            
          

Ovo pokazuje kako ElementType ispravno zaključuje tip elementa različitih tipova polja.

Napredna upotreba 'infer'

1. Zaključivanje parametara funkcije

Slično zaključivanju povratnog tipa, možete zaključiti parametre funkcije koristeći infer i n-torke (tuples):

            type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
            

              
                Copy
              
            
          

Objašnjenje:

• T extends (...args: any) => any: Ovo ograničenje osigurava da je T funkcija.
• (...args: infer P) => any: Ovaj obrazac odgovara funkciji i zaključuje tipove parametara kao n-torku P.
• P : never: Ako T nije funkcija, rezultirajući tip je never.

Primjer:

            function logMessage(message: string, level: 'info' | 'warn' | 'error'): void {
  console.log(`[${level.toUpperCase()}] ${message}`);
}

type LogMessageParams = Parameters<typeof logMessage>; // type LogMessageParams = [message: string, level: "info" | "warn" | "error"]

function processData(data: any[], callback: (item: any) => void): void {
  data.forEach(callback);
}

type ProcessDataParams = Parameters<typeof processData>; // type ProcessDataParams = [data: any[], callback: (item: any) => void]
            

              
                Copy
              
            
          

Parameters izdvaja tipove parametara kao n-torku, čuvajući redoslijed i tipove argumenata funkcije.

2. Izdvajanje svojstava iz tipa objekta

infer se također može koristiti za izdvajanje određenih svojstava iz tipa objekta. To zahtijeva složeniji uvjetni tip, ali omogućuje moćnu manipulaciju tipovima.

            type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};
            

              
                Copy
              
            
          

Objašnjenje:

• K in keyof T: Ovo iterira preko svih ključeva tipa T.
• T[K] extends U ? K : never: Ovaj uvjetni tip provjerava je li tip svojstva pod ključem K (tj. T[K]) dodijeljiv tipu U. Ako jest, ključ K se uključuje u rezultirajući tip; u suprotnom, isključuje se pomoću never.
• Cijela konstrukcija stvara novi tip objekta sa samo onim svojstvima čiji tipovi proširuju U.

Primjer:

            interface Person {
  name: string;
  age: number;
  city: string;
  country: string;
}


type StringProperties = PickByType<Person, string>; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType<Person, number>; // type NumberProperties = { age: number; }

            

              
                Copy
              
            
          

PickByType vam omogućuje stvaranje novog tipa koji sadrži samo svojstva određenog tipa iz postojećeg tipa.

3. Zaključivanje ugniježđenih tipova

infer se može lančano povezivati i ugniježđivati za izdvajanje tipova iz duboko ugniježđenih struktura. Na primjer, razmotrite izdvajanje tipa najunutarnjijeg elementa ugniježđenog polja.

            type DeepArrayElement<T> = T extends (infer U)[] ? DeepArrayElement<U> : T;
            

              
                Copy
              
            
          

Objašnjenje:

• T extends (infer U)[]: Ovo provjerava je li T polje i zaključuje tip elementa kao U.
• DeepArrayElement<U>: Ako je T polje, tip rekurzivno poziva DeepArrayElement s tipom elementa U.
• T: Ako T nije polje, tip vraća sam T.

Primjer:

            type NestedStringArray = string[][][];
type DeepString = DeepArrayElement<NestedStringArray>; // type DeepString = string

type MixedNestedArray = (number | string)[][][][];
type DeepMixed = DeepArrayElement<MixedNestedArray>; // type DeepMixed = string | number

type RegularNumber = DeepArrayElement<number>; // type RegularNumber = number
            

              
                Copy
              
            
          

Ovaj rekurzivni pristup omogućuje izdvajanje tipa elementa na najdubljoj razini ugniježđivanja u polju.

Primjene u stvarnom svijetu

Ključna riječ infer pronalazi primjenu u različitim scenarijima gdje je potrebna dinamička manipulacija tipovima. Evo nekoliko praktičnih primjera:

1. Stvaranje tipski sigurnog emitera događaja (Event Emitter)

Možete koristiti infer za stvaranje tipski sigurnog emitera događaja koji osigurava da rukovatelji događajima (event handlers) primaju ispravan tip podataka.

            type EventMap = {
  'data': { value: string };
  'error': { message: string };
};

type EventName<T extends EventMap> = keyof T;

type EventData<T extends EventMap, K extends EventName<T>> = T[K];

type EventHandler<T extends EventMap, K extends EventName<T>> = (data: EventData<T, K>) => void;

class EventEmitter<T extends EventMap> {
  private listeners: { [K in EventName<T>]?: EventHandler<T, K>[] } = {};

  on<K extends EventName<T>>(event: K, handler: EventHandler<T, K>): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(handler);
  }

  emit<K extends EventName<T>>(event: K, data: EventData<T, K>): void {
    this.listeners[event]?.forEach(handler => handler(data));
  }
}


const emitter = new EventEmitter<EventMap>();

emitter.on('data', (data) => {
  console.log(`Received data: ${data.value}`);
});

emitter.on('error', (error) => {
  console.error(`An error occurred: ${error.message}`);
});

emitter.emit('data', { value: 'Hello, world!' });

emitter.emit('error', { message: 'Something went wrong.' });

            

              
                Copy
              
            
          

U ovom primjeru, EventData koristi uvjetne tipove i infer za izdvajanje tipa podataka povezanog s određenim nazivom događaja, osiguravajući da rukovatelji događajima primaju ispravan tip podataka.

2. Implementacija tipski sigurnog reducera

Možete iskoristiti infer za stvaranje tipski sigurne reducer funkcije za upravljanje stanjem.

            type Action<T extends string, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer<S, A extends Action<string>> = (state: S, action: A) => S;

// Example Actions
type IncrementAction = Action<'INCREMENT'>;
type DecrementAction = Action<'DECREMENT'>;
type SetValueAction = Action<'SET_VALUE', number>;


// Example State
interface CounterState {
  value: number;
}

// Example Reducer
const counterReducer: Reducer<CounterState, IncrementAction | DecrementAction | SetValueAction> = (
  state: CounterState,
  action: IncrementAction | DecrementAction | SetValueAction
): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'SET_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

// Usage
const initialState: CounterState = { value: 0 };
const newState1 = counterReducer(initialState, { type: 'INCREMENT' }); // newState1.value is 1
const newState2 = counterReducer(newState1, { type: 'SET_VALUE', payload: 10 }); // newState2.value is 10

            

              
                Copy
              
            
          

Iako ovaj primjer ne koristi izravno `infer`, postavlja temelje za složenije scenarije s reducerima. `infer` se može primijeniti za dinamičko izdvajanje tipa `payload` iz različitih `Action` tipova, omogućujući strožu provjeru tipova unutar reducer funkcije. To je posebno korisno u većim aplikacijama s brojnim akcijama i složenim strukturama stanja.

3. Dinamičko generiranje tipova iz API odgovora

Kada radite s API-jima, možete koristiti infer za automatsko generiranje TypeScript tipova iz strukture API odgovora. To pomaže osigurati tipsku sigurnost pri interakciji s vanjskim izvorima podataka.

Razmotrite pojednostavljeni scenarij u kojem želite izdvojiti tip podataka iz generičkog API odgovora:

            type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

type ExtractDataType<T> = T extends ApiResponse<infer U> ? U : never;

// Example API Response
type User = {
  id: number;
  name: string;
  email: string;
};

type UserApiResponse = ApiResponse<User>;

type ExtractedUser = ExtractDataType<UserApiResponse>; // type ExtractedUser = User

            

              
                Copy
              
            
          

ExtractDataType koristi infer za izdvajanje tipa U iz ApiResponse<U>, pružajući tipski siguran način za pristup strukturi podataka koju vraća API.

Najbolje prakse i razmatranja

• Jasnoća i čitljivost: Koristite opisne nazive varijabli tipova (npr. ReturnType umjesto samo R) kako biste poboljšali čitljivost koda.
• Performanse: Iako je infer moćan, pretjerana upotreba može utjecati na performanse provjere tipova. Koristite ga promišljeno, posebno u velikim projektima.
• Obrada pogrešaka: Uvijek osigurajte zamjenski tip (npr. any ili never) u false grani uvjetnog tipa za rukovanje slučajevima kada tip ne odgovara očekivanom obrascu.
• Složenost: Izbjegavajte pretjerano složene uvjetne tipove s ugniježđenim infer izjavama, jer mogu postati teški za razumijevanje i održavanje. Refaktorirajte svoj kod u manje, upravljivije tipove kada je to potrebno.
• Testiranje: Temeljito testirajte svoje uvjetne tipove s različitim ulaznim tipovima kako biste osigurali da se ponašaju kako je očekivano.

Globalna razmatranja

Kada koristite TypeScript i infer u globalnom kontekstu, razmotrite sljedeće:

• Lokalizacija i internacionalizacija (i18n): Tipovi će se možda morati prilagoditi različitim lokalizacijama i formatima podataka. Koristite uvjetne tipove i `infer` za dinamičko rukovanje različitim strukturama podataka na temelju zahtjeva specifičnih za lokalizaciju. Na primjer, datumi i valute mogu biti različito predstavljeni u različitim zemljama.
• Dizajn API-ja za globalnu publiku: Dizajnirajte svoje API-je imajući na umu globalnu dostupnost. Koristite dosljedne strukture podataka i formate koji su laki za razumijevanje i obradu bez obzira na lokaciju korisnika. Definicije tipova trebale bi odražavati tu dosljednost.
• Vremenske zone: Kada radite s datumima i vremenima, budite svjesni razlika u vremenskim zonama. Koristite odgovarajuće biblioteke (npr. Luxon, date-fns) za rukovanje pretvorbama vremenskih zona i osigurajte točan prikaz podataka u različitim regijama. Razmislite o predstavljanju datuma i vremena u UTC formatu u svojim API odgovorima.
• Kulturne razlike: Budite svjesni kulturnih razlika u predstavljanju i tumačenju podataka. Na primjer, imena, adrese i telefonski brojevi mogu imati različite formate u različitim zemljama. Osigurajte da vaše definicije tipova mogu prihvatiti te varijacije.
• Rukovanje valutama: Kada radite s novčanim vrijednostima, koristite dosljedan prikaz valute (npr. ISO 4217 kodovi valuta) i prikladno rukujte pretvorbama valuta. Koristite biblioteke dizajnirane za manipulaciju valutama kako biste izbjegli probleme s preciznošću i osigurali točne izračune.

Na primjer, razmotrite scenarij u kojem dohvaćate korisničke profile iz različitih regija, a format adrese varira ovisno o državi. Možete koristiti uvjetne tipove i `infer` za dinamičku prilagodbu definicije tipa na temelju lokacije korisnika:

            type AddressFormat<CountryCode extends string> = CountryCode extends 'US'
    ? { street: string; city: string; state: string; zipCode: string; }
    : CountryCode extends 'CA'
    ? { street: string; city: string; province: string; postalCode: string; }
    : { addressLines: string[]; city: string; country: string; };

type UserProfile<CountryCode extends string> = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat<CountryCode>;
    countryCode: CountryCode; // Add country code to profile
};

// Example Usage
type USUserProfile = UserProfile<'US'>; // Has US address format
type CAUserProfile = UserProfile<'CA'>; // Has Canadian address format
type GenericUserProfile = UserProfile<'DE'>; // Has Generic (international) address format

            

              
                Copy
              
            
          

Uključivanjem `countryCode` u tip `UserProfile` i korištenjem uvjetnih tipova temeljenih na tom kodu, možete dinamički prilagoditi tip `address` kako bi odgovarao očekivanom formatu za svaku regiju. To omogućuje tipski sigurno rukovanje različitim formatima podataka u različitim zemljama.

Zaključak

Ključna riječ infer moćan je dodatak TypeScript sustavu tipova, omogućujući sofisticiranu manipulaciju i izdvajanje tipova unutar uvjetnih tipova. Ovladavanjem ključnom riječi infer, možete stvarati robusniji, tipski sigurniji i održiviji kod. Od zaključivanja povratnih tipova funkcija do izdvajanja svojstava iz složenih objekata, mogućnosti su ogromne. Ne zaboravite koristiti infer promišljeno, dajući prednost jasnoći i čitljivosti kako bi vaš kod dugoročno ostao razumljiv i održiv.

Ovaj vodič pružio je sveobuhvatan pregled ključne riječi infer i njezinih primjena. Eksperimentirajte s navedenim primjerima, istražite dodatne slučajeve upotrebe i iskoristite infer za poboljšanje svog razvojnog procesa u TypeScriptu.